.topbar {
	width: 100%;
	height: 2rem;
	background-color: black;
	color: white;
	font-size: 1rem;
	line-height: 2rem;
	text-align: center;
	user-select: none;

	.btn {
		color: white;
		transition: 0.05s;
		float: left;

		&:hover {
			text-shadow: 0 0 10px whitesmoke;
		}
	}

	#meetingIdSpan {
		display: inline-block;
		transform: translateX(-10vmin);
	}

	#copyBtn {
		color: white;
		padding: 0%;
		transform: translateX(-10vmin);
	}
}

#videoContainer {
	width: 100%;
	height: calc(100vh - 4rem);

	#mainBox {
		height: 90%;
		display: flex;
		background-color: #efefef;

		#mainVideo {
			position: relative;
			padding-inline: 0.1rem;
			background-color: black;

			#streamName {
				position: absolute;
				color: white;
				background-color: #303030;
				padding: 0.125rem 0.25rem;
			}
		}

		#members {
			min-width: 11rem;
			max-width: 11rem;
			height: 100%;
			background-color: #303030;
			display: flex;
			flex-direction: column;
			align-items: center;

			.scrollButton {
				text-align: center;
				width: 90%;
				height: 1.5em;
				line-height: 1.5em;
				background-color: #505050;
				margin-block: 0.2rem;
				color: #fff;
				cursor: pointer;

				&:hover {
					background-color: #808080;
				}
				&:active {
					background-color: #6c6c6c;
				}
			}

			#membersList {
				max-height: 100%;
				overflow-y: scroll;
				padding: 0.1rem;
				padding-inline: 0.2rem;
				margin-block: 0.5rem;
				margin-block-start: 0.25rem;
				margin-block-end: 0.25rem;

				&::-webkit-scrollbar {
					width: 0rem;
				}
			}
		}
	}

	#toolbar {
		height: calc(10% - 1.25px);
		background-color: white;
		display: flex;
		overflow: hidden;
		justify-content: center;
		align-items: center;
	}
}

#videoContainerFullScreen {
	#mainBox {
		height: 100%;
		display: flex;

		#mainVideo {
			position: relative;
			width: 100%;

			#streamName {
				position: absolute;
				color: white;
				background-color: #303030;
				padding: 0.125rem 0.25rem;
			}
		}

		#members {
			display: none;
		}
	}

	#toolbar {
		position: absolute;
		left: 0%;
		bottom: calc(-4rem);
		height: calc(4rem + 1px);
		width: 100%;
		background-color: rgba($color: #000000, $alpha: 0.5);
		color: white;
		display: flex;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		transition-duration: 1s;

		&:hover {
			transform: translateY(-4rem);
			transition-duration: 100ms;
		}
	}
}
